import React, { Component } from 'react';
import { View, Text } from 'react-native';
import PropTypes from 'prop-types';
import Picker from 'react-native-picker';
import Mask from 'bee/components/Mask';
import { Title, Item, ConfirmBtn } from 'bee/components/MakePlan';
import Switch from 'bee/components/Switch';
import Radio from 'bee/components/Radio';
import ChooseBtn from 'bee/components/MakePlan/ChooseBtn';
import { createDateData, pickerOptions } from 'bee/pickerOptions';
import { noop } from 'bee/utils';
import styles from './styles';

const Agreement = ({ selected, onPress, change }) => (
  <View style={styles.activeDateView}>
    <Text style={styles.agreeTitle}>指定生效日期</Text>
    <View style={styles.agreeContentView}>
      <Text style={styles.agreeContent}>
        本人（投保人）申请本保险合同自指定的保险合同生效日零时开始生效。同是本人同意：
        1、
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 2
        、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        3、XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
      </Text>

      <View style={[styles.row, styles.agreeBtnView]}>
        <Radio
          selected={selected}
          onPress={() => {
            change(!selected);
          }}
        />
        <Text style={styles.agreeText}>本人已阅读并同意指定生效日期</Text>
      </View>
    </View>

    <ConfirmBtn onPress={onPress} />
  </View>
);

Agreement.propTypes = {
  selected: PropTypes.bool,
  onPress: PropTypes.func,
  change: PropTypes.func,
};

Agreement.defaultProps = {
  selected: false,
  onPress: noop,
  change: noop,
};

// @flow
type Props = {
  indate: string,
  changeInfo: Function,
};

export default class ActiveDate extends Component<Props> {
  constructor(props) {
    super(props);

    this.state = {
      agreeSetDate: false,
      indate: this.props.indate,
      hasActiveDate: false,
    };

    this.showActiveDate = this.showActiveDate.bind(this);
    this.confirm = this.confirm.bind(this);
    this.changeField = this.changeField.bind(this);
  }

  showActiveDate() {
    const date = createDateData();
    const options = pickerOptions(date, indate => {
      this.changeField({ indate: indate.join('-') });
    });

    Picker.init(options);
    Picker.show();
  }

  changeField(state) {
    this.setState(state, () => {
      this.props.changeInfo(this.state.indate);
    });
  }

  confirm() {
    this.dateMask.close();
    if (this.state.agreeSetDate) {
      this.setState({ hasActiveDate: true });
    }
  }

  render() {
    return (
      <View style={styles.section}>
        <Text>{JSON.stringify(this.state)}</Text>
        <Title title="是否指定生效日期">
          <Mask
            contentPosition="center"
            ref={dateMask => {
              this.dateMask = dateMask;
            }}
          >
            <Text>按钮</Text>
            <Agreement
              selected={this.state.agreeSetDate}
              onPress={this.confirm}
              change={value => {
                this.setState({ agreeSetDate: value });
              }}
            />
          </Mask>
          <Switch
            value={this.state.hasActiveDate}
            onValueChange={value => {
              this.setState({ hasActiveDate: value }, () => {
                if (!this.state.hasActiveDate) {
                  this.changeField({ agreeSetDate: false, indate: '' });
                }
              });
            }}
          />
        </Title>

        {this.state.hasActiveDate ? (
          <View>
            <Item title="生效日期">
              <ChooseBtn
                text={this.state.indate}
                onPress={this.showActiveDate}
              />
            </Item>
            <Text style={styles.activeDateText}>
              如在指定生效日期之后承保，则生效日期自动顺延
            </Text>
          </View>
        ) : null}
      </View>
    );
  }
}
